<!--
 * @Author: Li Zengkun
 * @Date: 2022-06-18 23:50:55
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-01 20:14:56
 * @Description: 首页 > 产品
-->
<!--  -->
<template>
  <div id="productPage">
    <!-- 主题图片 -->
    <div id="banner" class="invisable wow"></div>
    <!-- 导航标签 -->
    <div class="target_content">
      <div class="main-content">
        您的位置:

        <router-link to="/" class="target">首页</router-link>
        <i class="fa fa-angle-right"></i>
        <router-link to="/product" class="target">产品</router-link>
      </div>
    </div>

    <!-- Part2 产品 -->
    <div class="main-content" style="height: auto">
      <div class="product-box">
        <div class="product-button invisable wow title_button" ref="productsTags">
          <a @click="choseTag(0)" class="active"><span>全部</span></a>
          <a @click="choseTag(1)" class=""><span>境外旅游</span></a>
          <a @click="choseTag(2)" class=""><span>境内旅游</span></a>
          <a @click="choseTag(3)" class=""><span>定制旅游</span></a>
          <a @click="choseTag(4)" class=""><span>特惠旅游</span></a>
        </div>
        <!-- 卡片 -->
        <div class="product-cards">
          <ul ref="product_ul_2" id="product_ul_2">
            <li v-for="item in selectProducts" :key="item" class="invisible wow">
              <a target="_blank" :href="'#detail?type=product&id=' + item.id" class="item_img">
                <img v-bind:src="item.image" />
                <div class="plus"><i class="fa fa-plus" aria-hidden="true"></i></div>
              </a>
              <div class="item_wrapper">
                <div class="item_info">
                  <a target="_blank" :href="'#detail?type=product&id=' + item.id" class="item_title">
                    {{ item.title }}
                    </a>
                  <p class="subtitle">
                    {{ item.subtitle }}
                  </p>
                </div>
                <div class="item_tags">
                  <a target="_blank" :href="'#detail?type=product&id=' + item.id" v-for="tag_item in item.tags" :key="tag_item">
                    {{ tag_item }}
                  </a>
                </div>
              </div>
              <a :href="'#detail?type=product&id=' + item.id" target="_blank" class="more" 
                ><i class="fa fa-long-arrow-right" aria-hidden="true"></i
              ></a>
            </li>
          </ul>
        </div>

        <!-- 分页 -->
        <div class="pages">
          <a class="prev" @click="prev()">
            <i class="fa fa-angle-left"></i>
          </a>
          <a
            v-for="item in pages"
            :key="item"
            :class="item == 1 ? 'page_active page_item' : 'page_item'"
            @click="jumpBtn(item - 1)"
          >
            {{ item }}
          </a>
          <a class="next" @click="next()">
            <i class="fa fa-angle-right"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      // 目标产品
      targetProducts: [],
      //   显示的标签列表
      selectProducts: [],
      //   开始的索引
      startIndex: 0,
      //   每页标签数量
      pagesnum: 8,
      //   总的页数
      pages: 0,
      //   选择的页码
      pageSelect: 0,
    };
  },
  components: {},
  mounted() {
    document.getElementsByTagName('title')[0].innerHTML = '云旅 | 产品'
    // 初始化产品列表
    this.$axios.get("/data.json").then((res) => {
      this.products = res.data.products;
      this.targetProducts = this.products;
      this.pages = Math.ceil(this.targetProducts.length / this.pagesnum);
      this.initProductList();
    });
  },
  methods: {
    // 产品分类
    choseTag(index) {
      if (index < 0 || index > 4) return;
      if (index === 0) {
        this.targetProducts = this.products;
      } else {
        this.targetProducts = this.products.filter((item) => {
          return (
            item.type ==
            (index === 1
              ? "境外旅游"
              : index === 2
              ? "境内旅游"
              : index === 3
              ? "定制旅游"
              : "特惠旅游")
          );
        });
      }
      this.pages = Math.ceil(this.targetProducts.length / this.pagesnum);
      this.initProductList();
      this.clearTagActive();
      this.addTagActive(index);
    },
    clearTagActive() {
      document.getElementsByClassName("active")[0].classList.remove("active");
    },
    addTagActive(index) {
      this.$refs.productsTags.childNodes[index].classList.add("active");
    },

    // 初始化产品列表
    initProductList() {
      this.selectProducts = this.targetProducts.slice(
        this.startIndex,
        this.startIndex + this.pagesnum
      );
    },
    // 上一页
    prev() {
      if (this.pageSelect <= 0) {
        return;
      } else {
        this.pageSelect--;
        this.jumpBtn(this.pageSelect);
        this.startIndex == this.pagesnum * this.pageSelect;
        this.selectProducts = this.targetProducts.slice(
          this.startIndex,
          this.startIndex + this.pagesnum
        );
      }
    },
    // 下一页
    next() {
      if (this.pageSelect >= this.pages - 1) {
        return;
      } else {
        this.pageSelect++;
        this.jumpBtn(this.pageSelect);
        this.startIndex == this.pagesnum * this.pageSelect;
        this.selectProducts = this.targetProducts.slice(
          this.startIndex,
          this.startIndex + this.pagesnum
        );
      }
    },
    // 清空选中
    clearBtn() {
      let page_active = document.getElementsByClassName("page_active")[0];
      page_active.classList.remove("page_active");
    },
    // 列表跳转
    jumpBtn(index) {
      this.clearBtn();
      this.pageSelect = index;
      let page = document.getElementsByClassName("page_item")[index];
      page.classList.add("page_active");
      this.startIndex = this.pagesnum * this.pageSelect;
      this.selectProducts = this.targetProducts.slice(
        this.startIndex,
        this.startIndex + this.pagesnum
      );
      setTimeout(() => {
        this.addwow();
      }, 50);
    },
  },
};
</script>

<style scoped>
@import "../assets/css/indexPage.css";

#productPage {
  height: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  background-color: #fff;
}
#productPage #banner {
  height: 400px;
  background-image: url("../assets/main_img1.jpg");
  background-position: center;
}
#productPage .product-button {
  width: 100%;
  text-align: left;
}
#product_ul_2 {
  justify-content: left;
}
</style>
